<template>
  <div id="fvaluation_statistics" style="width: 100%;height: 100%;position: relative;">
    <div class="nodata" v-if="!this.data || !this.data.length">暂无数据</div>
  </div>
</template>
<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    data (newv) {
      this._initCharts()
    }
  },
  mounted() {
    this._initCharts()
  },
  methods: {
    _initCharts () {
      if(!this.data || !this.data.length) {
        return
      }
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("fvaluation_statistics"))
      let showAllName = 0
      if(this.data.length > 10) {
        showAllName = 1
      }
      const labelName = []
      const workData = []
      const timeData = []
      for(let i=0;i<this.data.length;i++) {
        labelName.push(this.data[i].name)
        workData.push(this.data[i].count)
        timeData.push(Math.ceil(this.data[i].totalTime/60))
      }
      // console.log(labelName, workData, timeData)
      const option = {
          title: {
              text: ''
          },
          tooltip: {
              trigger: 'axis'
          },
          legend: {
              icon: 'circle',
              data: ['小时', '件数'],
              top: 0,
              textStyle: {
                  color: '#fff',
                  fontSize: this.$options.filters.fontSize(0.16)
              },
              itemWidth: this.$options.filters.fontSize(0.1),
              itemHeight: this.$options.filters.fontSize(0.1),
              right: '10%'
          },
          grid: {
              top: '15%',
              left: '3%',
              right: '4%',
              bottom: '5%',
              containLabel: true
          },
          toolbox: {
              show: false,
              feature: {
                  saveAsImage: {}
              }
          },
        //   dataZoom: [{
        //     "show": false,
        //     "height": this.$options.filters.fontSize(0.06),
        //     "xAxisIndex": [
        //         0
        //     ],
        //     bottom: '0',
        //     "start": 0,
        //     "end": 35,
        //     backgroundColor: '#303030',
        //     fillerColor: '#828282',
        //     handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
        //     handleSize: '0%',
        //     handleStyle: {
        //         color: "transparent",
        //     },
        //     textStyle: {
        //         color: "transparent"
        //     },
        //     borderColor: "transparent"
        // }, {
        //     "type": "inside",
        //     "show": false,
        //     "height": this.$options.filters.fontSize(0.15),
        //     "start": 1,
        //     "end": 35
        // }],
          xAxis: {
          type: 'category',
          boundaryGap: true,//坐标轴两边留白
          data: labelName,
          axisLabel: { //坐标轴刻度标签的相关设置。
            interval: 0,//设置为 1，表示『隔一个标签显示一个标签』
            //	margin:15,
            textStyle: {
                color: '#fff',
                fontSize: this.$options.filters.fontSize(0.16),
            },
            rotate: 40,
            formatter:function(params) {
                var newParamsName = "";
                var paramsNameNumber = params.length;
                var provideNumber = 3;  //一行显示几个字
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                if (paramsNameNumber > provideNumber) {
                    for (var p = 0; p < rowNumber; p++) {
                        var tempStr = "";
                        var start = p * provideNumber;
                        var end = start + provideNumber;
                        if (p == rowNumber - 1) {
                            tempStr = params.substring(start, paramsNameNumber);
                        } else {
                            tempStr = params.substring(start, end) + "\n";
                        }
                        newParamsName += tempStr;
                    }

                } else {
                    newParamsName = params;
                }
                return newParamsName
            },
            //rotate:50,
          },
          axisTick:{//坐标轴刻度相关设置。
            show: false,
          },
          axisLine:{//坐标轴轴线相关设置
            lineStyle:{
              color:'#fff',
              opacity:0.1
            }
          },
          splitLine: { //坐标轴在 grid 区域中的分隔线。
            show: false,
            lineStyle: {
              color: '#fff',
            // 	opacity:0.1
            }
          }
          },
          yAxis: [
          {
            type: 'value',
            name: "件数（件）",
            nameTextStyle: {
              color: '#fff',
              fontSize: this.$options.filters.fontSize(0.16)
            },
            splitNumber: 4,
            axisLabel: {
              textStyle: {
                color: '#fff',
                fontSize: this.$options.filters.fontSize(0.16),
              }
            },
            axisLine:{
              show: false
            },
            axisTick:{
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#fff',
              	opacity:0.1
              }
            }

          },
          {
            type: 'value',
            name: "小时（H）",
            nameTextStyle: {
              color: '#fff',
              fontSize: this.$options.filters.fontSize(0.16)
            },
            splitNumber: 4,
            axisLabel: {
              textStyle: {
                color: '#fff',
                fontSize: this.$options.filters.fontSize(0.16),
              }
            },
            axisLine:{
              show: false
            },
            axisTick:{
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#383838',
              // 	opacity:0.1
              }
            }

          }
        ],
          series: [
            {
              name: '小时',
              type: 'line',
              symbol: 'circle',
              symbolSize: this.$options.filters.fontSize(0.06),
              nameTextStyle: {
                fontSize: this.$options.filters.fontSize(0.16),
              },
              itemStyle: {
                normal: {
                color:'#406CC4',
                    lineStyle: {
                      color: "#406CC4",
                      width:1
                    },
                    // areaStyle: { 
                    //   color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                    //     offset: 0,
                    //     color: 'rgba(84, 130, 192, 0)'
                    //   }, {
                    //     offset: 1,
                    //     color: 'rgba(84, 130, 192, 0.5)'
                    //   }]),
                    // }
                }
              },
                  data: timeData
              },
              {
                  name: '件数',
                  type: 'line',
                  symbol: 'circle',
                  symbolSize: this.$options.filters.fontSize(0.06),
                  itemStyle: {
                  normal: {
                      color:"#C07636",
                      lineStyle: {
                        color: "#C07636",
                        width:1
                      },
                  }
            },
                  data: workData
              }
              
          ]
      }


      // 绘制图表
      myChart.setOption(option)
      
      
    }

  }
  
}
</script>
<style lang="scss" scoped>
.charts_container {
  width: 100%;
  height: 305px;
  margin-right: 19px;
  position: relative;
  box-sizing: border-box;
}
</style>